<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>test case</title>

<style type="text/css">
    html, body, div {
        margin: 0;
        padding: 0;
    }
    .ct {
        width: 100%;
        height: 100px;
        background-color: lightgreen;
    }
    .ct div {
        padding: 15px 15px 0;
    }
</style>

<body>

<div class="ct">
    <div>userAgent: <span></span></div>
    <div><span></span></div>
    <div>width: <span></span></div>
    <div>height: <span></span></div>
</div>

<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="adapter.js"></script>
<script type="text/javascript" src="supporter.js"></script>
<script type="text/javascript" src="resizer.js"></script>
<script type="text/javascript">
    var ct = document.querySelector('.ct'),
        spans = document.querySelectorAll('span'),
        str = '', o;

    spans[0].innerHTML = window.navigator.userAgent;

    for (o in supporter.os) {
        str += o + ': ' + supporter.os[o] + '<br>';
    }
    for (o in supporter) {
        if (o !== 'os') {
            str += o + ': ' + supporter[o] + '<br>';
        }
    }
    spans[1].innerHTML = str;

    resizer.on(function(w, h) {
        ct.style.width = w + 'px';
        ct.style.height = h + 'px';
        spans[2].innerHTML = w + 'px';
        spans[3].innerHTML = h + 'px';
    });
</script>
</body>
</html>